<template>
  <div>
    <!-- prettier-ignore -->
    <pre>{{ form }}</pre>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="活动名称" prop="中文key">
        <el-input v-model="form.中文key"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" prop="attr2">
        <el-input v-model="form.attr2"></el-input>
      </el-form-item>
      <!-- 注意： el-form-item 里绑定操作用的属性是 prop -->
    </el-form>
    <el-button @click="resetForm('form')">reset</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="col_1" label="col_1">
        <template slot-scope="scope">{{ scope.row.col_1 }}</template>
      </el-table-column>
      <el-table-column prop="col_2" label="col_2">
        <template slot-scope="scope">{{ scope.row.col_2 }}</template>
      </el-table-column>
      <el-table-column prop="col_3" label="col_3">
        <template slot-scope="scope">{{ scope.row.col_3 }}</template>
      </el-table-column>
      <el-table-column prop="col_4" label="col_4">
        <template slot-scope="scope">{{ scope.row.col_4 }}</template>
      </el-table-column>
      <el-table-column prop="col_5" label="col_5">
        <template slot-scope="scope">{{ scope.row.col_5 }}</template>
      </el-table-column>
      <!-- 注意： el-table-column 里 prop 属性可能作用于排序等内部操作，但该页面一般不需要 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange($event)"
      @current-change="handleCurrentChange($event)"
      :current-page="page.current"
      :page-sizes="page.sizes"
      :page-size="page.size"
      :layout="page.layout"
      :total="page.total">
    </el-pagination>
    {{ tableList }}
    <el-button @click="ajaxData">test</el-button>
  </div>
</template>

<script>
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
// 如果逻辑移到 $store 里的话，也是可行的

let rules = {
  string: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 个字符', trigger: 'blur' },
  ],
};

import queryTablePage from '@/mixin/queryTablePage.vue';
export default {
  name: '',
  mixins: [queryTablePage],
  data() {
    return {
      form: {
        中文key: '',
        attr2: '',
      }, //用来绑定参数，接受验证，但后面用computed来收集

      rules: {
        //可以其他地方定义后引用
        attr2: rules.string,
      }, // 验证在 这种查表的页面 需求不大，在某条数据操作修改的需求更大
      sourceData: [1, 2, 3, 4],
    };
  },
  computed: {
    conditionParameters: function () {
      let t = this.form;
      return {
        key: t.中文key, //提交给接口的key，和直接与页面相符的中文key
      };
    }, // this.data.form 整合前端的操作，转key/value作为参数给后端在这里更合适一点
    tableData: function () {
      let s = this.sourceData;
      // 建议在 data.sourceData 中缓存接口给出的原始数据，再根据实际需求自行处理
      // 实际需求包括且不限于：字段格式化，前端分页，reduce成树形格式配合折叠使用……
      if (s.length == 0) {
        return [];
      }
      return s.map((v, i) => {
        return {
          col_1: `row_${i + 1}_col_1`,
          col_2: `row_${i + 1}_col_2`,
          col_3: `row_${i + 1}_col_3`,
          col_4: `row_${i + 1}_col_4`,
          col_5: `row_${i + 1}_col_5`,
        };
      });
    }, // 实际显示数据的位置
  },
  methods: {
    resetForm(formName) {
      //因为额外的功能（比如reset）才需要在 el-form 上 :model 绑定，
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>